<template>
  <div id="app">
    <div class="index">
      <div class="headLeft">
        <img src="./assets/img/favicno.jpg" class="head-ico"/>
        <router-link to="/index" class="router-link-left" active-class="active">首页</router-link>
<!--        <router-link to="/tribune" class="router-link-left" active-class="active">志愿排行</router-link>-->
        <router-link to="/activity" class="router-link-left" active-class="active">志愿活动</router-link>
        <router-link to="/news" class="router-link-left" active-class="active">志愿资讯</router-link>
        <router-link to="/aboutus" class="router-link-left" active-class="active">关于我们</router-link>
      </div>
      <!--未登录-->
      <div v-if="!$store.state.islog" class="headRight">
        <router-link to="/log" class="router-link-right" active-class="active">登录</router-link>
        <router-link to="/register0" class="router-link-right" active-class="active">注册</router-link>
      </div>
      <!-- 管理员 -->
      <div v-if="$store.state.islog && $store.state.userInfo.isManagement" class="headRight">
        <div class="log-right-touxiang" @click="personal('/myhome')"><img
            :src="$store.state.publicStaticPath + $store.state.userInfo.avatar" alt=""/></div>
        <!-- 这里要用props传一个参数过来 -->

          <a @click="getinbox(true)" class="router-link-right">
            <el-badge :value="messageNum" :max="99">
              <i class="el-icon-message"></i>
            </el-badge>
          </a>


        <div class="inbox">
          <el-drawer title="站内信" :modal="false" :visible.sync="drawer" :direction="direction">
            <div class="header">
              <div class="header-left">
                <el-select v-model="value" placeholder="消息状态">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </div>
<!--              <div class="header-center">
                <el-select v-model="cityvalue" placeholder="消息发布者">
                  <el-option v-for="item in cities" :key="item.cityvalue" :label="item.label" :value="item.cityvalue">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.cityvalue }}</span>
                  </el-option>
                </el-select>
              </div>-->
              <div class="header-right">
                <el-select v-model="messagevalue" placeholder="消息类型">
                  <el-option v-for="item in message" :key="item.value" :label="item.label"
                             :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="centercard">
              <!-- 							<div class="center-card" v-for="(item, index) in $store.state.inboxsimple" :key="index">
                              <div class="inbox-head">
                                <span>{{ item.inbox_name }}</span>
                                <span>{{ item.inbox_time }}</span>
                              </div>
                              <div class="inbox-center">
                                <span>{{ item.inbox_detail }}</span>
                              </div>
                              <div class="inbox-footer"><router-link to="/inbox">查看更多</router-link></div>
                            </div> -->
              <el-card shadow="hover" class="center-card" v-for="(item, index) in inboxsimple"
                       :key="index" :style="{opacity: (item.message_status === '1' ? 0.5 : 1 )}">
                <div slot="header" class="inbox-head" @click="toinboxdetail1(index)">
                  <span>{{ item.message_title }}</span>
                  <span>{{ item.message_create_time }}</span>
                </div>
                <div class="inbox-center" @click="toinboxdetail1(index)">{{ item.message_content }}</div>
              </el-card>
            </div>
            <div>
              <router-link to="/inbox" class="inbox-footer">查看更多</router-link>
            </div>
          </el-drawer>
        </div>
        <!-- <router-link to="/inbox" class="router-link-right" ><i class="el-icon-message"></i></router-link> -->
        <a>{{ $store.state.loguser }}</a>

        <router-link to="/Creatingactivities" class="router-link-right" active-class="active">创建活动</router-link>
        <router-link to="/Creatingnews" class="router-link-right" active-class="active">创建资讯</router-link>
        <div @click="outsignclick('/index')">
          <router-link to="/#" class="router-link-right" active-class="active">退出</router-link>
        </div>
      </div>
      <!-- 志愿者 -->
      <div v-if="$store.state.islog && !$store.state.userInfo.isManagement" class="headRight">
        <div class="log-right-touxiang" @click="personal('/myhome')"><img
            :src="$store.state.publicStaticPath + $store.state.userInfo.avatar" alt=""/></div>
        <!-- 这里要用props传一个参数过来 -->
        <a @click="getinbox(true)" class="router-link-right">
          <el-badge :value="messageNum" :max="99">
            <i class="el-icon-message"></i>
          </el-badge>
        </a>
        <div class="inbox">
          <el-drawer title="站内信" :modal="false" :visible.sync="drawer" :direction="direction">
            <div class="header">
              <div class="header-left">
                <el-select v-model="value" placeholder="消息状态">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </div>
<!--              <div class="header-center">
                <el-select v-model="cityvalue" placeholder="消息发布者">
                  <el-option v-for="item in cities" :key="item.cityvalue" :label="item.label" :value="item.cityvalue">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.cityvalue }}</span>
                  </el-option>
                </el-select>
              </div>-->
              <div class="header-right">
                <el-select v-model="messagevalue" placeholder="消息类型">
                  <el-option v-for="item in message" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="centercard">
              <!-- 							<div class="center-card" v-for="(item, index) in $store.state.inboxsimple" :key="index">
                              <div class="inbox-head">
                                <span>{{ item.inbox_name }}</span>
                                <span>{{ item.inbox_time }}</span>
                              </div>
                              <div class="inbox-center">
                                <span>{{ item.inbox_detail }}</span>
                              </div>
                              <div class="inbox-footer"><router-link to="/inbox">查看更多</router-link></div>
                            </div> -->
              <el-card shadow="hover" class="center-card" v-for="(item, index) in inboxsimple"
                       :key="index" :style="{opacity: (item.message_status === '1' ? 0.5 : 1 )}">
                <div slot="header" class="inbox-head" @click="toinboxdetail1(index)">
                  <span>{{ item.message_title }}</span>
                  <span>{{ item.message_create_time }}</span>
                </div>
                <div class="inbox-center" @click="toinboxdetail1(index)">{{ item.message_content }}</div>
              </el-card>
            </div>
            <div>
              <router-link to="/inbox" class="inbox-footer">查看更多</router-link>
            </div>
          </el-drawer>
        </div>
        <a>{{ $store.state.loguser }}</a>
        <div @click="outsignclick('/index')">
          <router-link to="/#" class="router-link-right" active-class="active">退出</router-link>
        </div>
      </div>
    </div>

    <div class="body">
      <router-view></router-view>
    </div>

    <footer>
      <div class="row">
        <div class="col">
          <img src="./assets/img/favicno.jpg" class="logo"/>
          <p>1.1 本协议指本《用户注册协议》、《用户隐私权保护政策和个人信息利用政策》及本协议明确 援引的其他协议、规则或通知。</p>
        </div>
        <div class="col">
          <h3>
            office
            <div class="underline"><span></span></div>
          </h3>
          <p>itrl road</p>
          <p>whtiefiler najckdlkfg</p>
          <p>whtiefiler najckdlkfg</p>
          <p class="email-id">1535638577@qq.com</p>
          <h4>13718470799</h4>
        </div>
        <div class="col">
          <h3>
            links
            <div class="underline"><span></span></div>
          </h3>
          <ul class="footer-ul">
            <li><a href="#">home</a></li>
            <li><a href="#">home</a></li>
            <li><a href="#">home</a></li>
            <li><a href="#">home</a></li>
            <li><a href="#">home</a></li>
          </ul>
        </div>
        <div class="col">
          <h3>
            newsletter
            <div class="underline"><span></span></div>
          </h3>
          <form>
            <input type="email" placeholder="输入你的邮箱"/>
            <button type="submit">-></button>
          </form>
        </div>
      </div>
      <hr/>
      <p class="copyright"><a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2021010878号-4</a></p>
    </footer>
    <el-backtop :bottom="100" :right="30"><i class="el-icon-arrow-up"></i></el-backtop>
  </div>
</template>

<script>
import {request} from './api/axios.js';

export default {
  name: 'app',
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      // 消息类型选择
      options: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '未读'
        },
        {
          value: 2,
          label: '已读'
        }
      ],
      value: 0,
      // 消息列表
      inboxsimple: [],

      // 下方暂无作用
      cities: [
        {
          cityvalue: 'teacher',
          label: '老师'
        },
        {
          cityvalue: 'student',
          label: '学生'
        },
        {
          cityvalue: 'other',
          label: '其他'
        }
      ],
      cityvalue: '',
      message: [
        {
          value: 'teacher',
          label: '资讯审核'
        },
        {
          value: 'student',
          label: '活动审核'
        },
        {
          value: 'other',
          label: '其他'
        }
      ],
      messagevalue: 'teacher'
    };
  },
  computed: {
    // 未读消息数量
    messageNum() {
      let num = 0
      this.inboxsimple.find(item => {
        if (item.message_status === '0') {
          num++
        }
      })
      return num
    }
  },
  watch: {
    value() {
      // 获取消息列表
      request({
        url: '/v1/messages/receivemessage',
        method: 'post',
        data: {
          page: 1,
          message_type: this.value,
          user_name: this.$store.state.userInfo.userName,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.inboxsimple = res.data.data;
        } else this.inboxsimple = [];
      });
    },

    '$route' () { //监听路由是否变化
      this.value = 0
      this.getinbox()
    },
  },
  created() {
    if (this.$store.state.islog === false) {
      this.autolog();
    } else {
      this.getinbox(false);
      return;
    }

  },
  methods: {
    // 去message详情页
    toinboxdetail1(index) {
      // 关闭抽屉
      this.drawer = false
      // 消息id
      let id = this.inboxsimple[index].id;
      // 活动id
      if (this.inboxsimple[index].message_type === '0' || this.inboxsimple[index].message_type === '2') {
        let activityId = this.inboxsimple[index].join_activity_id;
        // 获取活跃的活动体
        this.$store.dispatch('toActivityDetail', activityId)
      }
      // 获取活跃的消息体
      this.$store.dispatch('toinboxdetail', id)

      this.$router.push({
        path: '/inboxdetail'
      });
    },
    // 获取消息列表
    getinbox(drawer) {
      if (drawer) {
        this.drawer = drawer;
      }
      request({
        url: '/v1/messages/receivemessage',
        method: 'post',
        data: {
          page: 1,
          message_type: this.value,
          user_name: this.$store.state.userInfo.userName,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.inboxsimple = res.data.data;
        } else this.inboxsimple = [];
      });
    },
    // 自动登录
    autolog() {
      let token = window.localStorage.getItem('token');
      request({
        url: '/v1/users/autologin',
        method: 'post',
        data: {
          token: token ? token : ''
        }
      }).then(res => {
        if (res.data.code === 200) {
          // this.$alert('登录成功！', {
          // 	confirmButtonText: '确定',
          // 	callback: () => {
          // 		this.$message({
          // 			type: 'info',
          // 			message: '登录成功'
          // 		});
          // 		this.$router.push('/index');
          // 		this.$store.commit('changelog');
          // 	}
          // });
          this.$store.commit('changelog');
          this.$store.state.userInfo = res.data.data.userInfo;
          console.log('自动登录', this.$store.state.userInfo);
        }
      });
    },
    // 游客登录
    logclick(value) {
      this.$router.push(value);
    },
    // 游客注册
    signclick(value) {
      this.$router.push(value);
    },
    // 退出登录
    outsignclick(value) {
      this.$router.push(value);
      this.$store.commit('outlog');
      var storage = window.localStorage;
      storage.clear();
    },
    personal(value) {
      this.$router.push(value);
    },
    actmove($event) {
      $event.currentTarget.className = 'active';
    },
    remove($event) {
      $event.currentTarget.className = '';
    }
  }
};
</script>

<style scoped>
@import url('assets/css/index.css');

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.log-right-touxiang img {
  height: 3.125rem;
  width: 3.125rem;
  border-radius: 50%;
  margin-top: 0.5rem;
  margin-right: 1rem;
}

.log-right-touxiang img:hover {
  cursor: pointer;
}

.el-icon-message {
  font-size: 1.5rem;
}

.el-icon-message:hover {
  cursor: pointer;
}

.header {
  display: flex;
  margin: 0rem 0rem -2rem 2rem; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
}

.header .header-left {
  width: 8rem;
  margin-right: 2rem;
}

.header .header-center {
  width: 8rem;
  margin-right: 2rem;
}

.header .header-right {
  width: 8rem;
  margin-right: 2rem;
}

.centercard {
  width: 100%;
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.centercard:hover {
  cursor: pointer;
}

.center-card {
  width: 90%;
  margin: 1rem 0;
}

.inbox-head {
  justify-content: space-between;
  display: flex;
}

.inbox-center {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.inbox-footer {
  text-decoration: none;
  color: #B5B5B5;
  justify-content: center;
  display: flex;
}

</style>
